<template>
	<!-- 20230426 -->
	<view class="mall-index-page">
		<!-- 页面内容 -->
		<view class="page-content padding-bottom-tab-bar-20">

			<!-- 搜索框 固定在顶部 -->
			<view class="jc-header padding-lr-30 bg-main">
				
				<!-- #ifdef APP-PLUS -->
				<!-- 占位 view，避免页面内容出现在状态栏 -->
				<view class="height-status-bar"></view>
				<!-- #endif -->
				
				<!-- 搜索 -->
				<view class="height-header flex justify-between align-center">
					<!-- LOGO 110 * 60 -->
					<image :src="logoImg" class="jc-image margin-right-15" style="width: 110rpx;height: 60rpx;">
					</image>
					<!-- 搜索框 -->
					<view class="width-100p" @click="go('/pages/mall/search')">
						<!-- 组件：搜索框 -->
						<ty-bar-search :disabled="searchDisabled" bg-color="#FFF"></ty-bar-search>
					</view>
				</view>
			</view>

			<!-- 滑动的页面部分 -->
			<view class="margin-top-status-bar-header">
				<!-- 轮播图 -->
				<view class="swiper-block padding-top-10 padding-bottom-15 padding-lr-30" v-if="carousel.length">
					<!-- 组件：轮播图 -->
					<ty-swiper-home :list="carousel"></ty-swiper-home>
				</view>

				<!-- 分类 -->
				<view class="padding-top-15 bg-ff" v-if="category.length">
					<!-- 组件：轮播分类组 -->
					<ty-swiper-group :list="category" @click="goList"></ty-swiper-group>
				</view>

				<!-- 广告图 -->
				<view class="padding-tb-15 padding-lr-30 bg-ff">
					<ty-image-advertise :list="advertise"></ty-image-advertise>
				</view>

				<!-- 商品列表 -->
				<view class="">
					<!-- 标题 -->
					<view class="padding-lr-30 padding-top-15 padding-bottom-10 flex align-center">
						<text class="line-height-50 text-40 text-bold">好物推荐</text>
						<text class="margin-left-15 line-height-30 text-26 text-aa">精挑细选的好物带回家</text>
					</view>
					<!-- 列表 -->
					<jc-mall-productList :list="list" :loadStatus="loadStatus" :is-label-show="true"></jc-mall-productList>
				</view>
			</view>

		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">
			<!-- 首次注册获得优惠券浮层 -->
			<jc-discount-receiveCouponLayer :show.sync="isReceiveCouponShow" :list="ReceiveCouponList">
			</jc-discount-receiveCouponLayer>
		</view>
	</view>
</template>

<script>
	import coupon from '../discount/api/coupon.js'
	import project from '../project/api/project.js'
	import mall from './api/mall.js'
	export default {
		data() {
			return {
				// LOGO路径
				logoImg: '',
				// 搜索框禁用
				searchDisabled: true,
				// 轮播图
				carousel: [],
				// 分类
				category: [],
				// 组件：广告图
				advertise: {
					// 上方，最多1张
					"top": [],
					// 下方，最多3张
					"bottom": []
				},
				// 加载状态
				loadStatus: '',
				// 推荐商品列表
				list: [],
				// 下拉刷新状态 true--正在下拉 false--没有在下拉
				isPullDownIng: false,
				//【微信小程序】首页分享配置
				homeShare: {},
				// 组件：获取优惠券浮层是否展示
				isReceiveCouponShow: false,
				// 组件：获取优惠券列表
				ReceiveCouponList: []
			}
		},
		
		onShow(){
			//获取首页分享信息
			project.getMpweixinConfig().then(res => {
				if (res.code == 0) {
					this.homeShare.home_share_title = res.data.mpweixin.home_share_title
					this.homeShare.home_share_img_url = res.data.mpweixin.home_share_img_url
					
					// 微信公众号分享
					if (this.cn.userAgent() == 'weixin') {
						this.wx.share({
							title: this.homeShare.home_share_title,
							desc: this.homeShare.home_share_title,
							link: window.location.href,
							imgUrl: this.homeShare.home_share_img_url
						})
					}
				}
			})
		},

		onReady() {
			// 获取LOGO
			this.getLogo()
			// 获取轮播图
			this.getCarousel()
			// 获取分类
			this.getCategory()
			// 获取广告图
			this.getAdvertise()
			// 获取推荐商品
			this.loadList(1)
			
			if(this.cn.isLogin()){
				// 获取首次注册优惠券
				this.insertFirstRegisterMyCoupon()
			}
		},

		onReachBottom() {
			// 获取推荐商品
			this.loadList(0)
		},

		/**
		 * 监听用户下拉动作，一般用于下拉刷新
		 * @date 2022-05-23
		 */
		onPullDownRefresh() {
			// 下拉刷新状态为进行中
			this.isPullDownIng = true
			// 获取推荐商品
			this.loadList(1)
		},

		// #ifdef MP
		/**
		 * 小程序首页分享
		 * @date 2022-05-24
		 */
		onShareAppMessage() {
			return {
				title: this.homeShare.home_share_title,
				path: '/pages/mall/index',
				imageUrl: this.homeShare.home_share_img_url
			}
		},
		// #endif

		methods: {
			/**
			 * 获取LOGO
			 * @date 2022-10-27
			 */
			getLogo() {
				project.getLogo().then(res => {
					if (res.code == 0) {
						// 项目LOGO
						this.logoImg = res.data.config.logo_img
					}
				})
			},

			/**
			 * 获取轮播图
			 * @date 2022-10-27
			 */
			getCarousel() {
				mall.getCarousel().then(res => {
					if (res.code == 0) {
						this.carousel = res.data.carousel
					}
				})
			},

			/**
			 * 获取分类
			 * @date 2022-10-27
			 */
			getCategory() {
				mall.listCategory().then(res => {
					if (res.code == 0) {
						this.category = res.data.category
					}
				})
			},

			/**
			 * 获取广告图
			 * @date 2022-10-27
			 */
			getAdvertise() {
				mall.getAdvertise().then(res => {
					if (res.code == 0) {
						this.advertise = res.data.advertise
					}
				})
			},

			/**
			 * 获取推荐商品
			 * @param {int} isFirstPage 是否第一页 0--不是 1--是
			 * @date 2022-10-27
			 */
			loadList(isFirstPage) {
				mall.listProduct(this, isFirstPage, '', '', '', 1, '', '', 5).then(res => {
					// 正在下拉状态时，停止下拉刷新
					if (this.isPullDownIng) {
						uni.stopPullDownRefresh()
					}
				})
			},

			/**
			 * 点击分类
			 * @param {object} e
			 * @date 2022-10-28
			 */
			goList(e) {
				// 跳转列表页
				uni.navigateTo({
					url: '/pages/mall/list?first_category_id=' + this.category[e.index].id
				})
			},

			/**
			 * 获取首次注册优惠券
			 * @date 2022-10-28
			 */
			insertFirstRegisterMyCoupon() {
				coupon.insertFirstRegisterMyCoupon().then(res => {
					if (res.code == 0) {
						if(res.data.coupon_list.length > 0){
							this.isReceiveCouponShow = true
							this.ReceiveCouponList = res.data.coupon_list
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	/* 轮播图 */
	.swiper-block {
		background: linear-gradient(to bottom, var(--main), #FFFFFF);
	}
</style>
